import React from 'react';
import {Field, reduxForm, initialize, change, formValueSelector}     from 'redux-form';

class Form extends React.Component {
	render() {
		let {children, ...props} = this.props;
		return (
			<form {...props}>{children}</form>
		)
	}
}


Form.renderInputField = ({input, label, type, meta: {touched, error}}) => (
	<div className="form-field">
		<label>{label}</label>
		<div className="form-field-wrapper">
			<input {...input} placeholder={label} type={type}/>
			{touched && error && <span className="field-error">{error}</span>}
		</div>
	</div>
);

Form.renderTextField = ({input, label, type, meta: {touched, error}}) => (
	<div className="form-field">
		<label>{label}</label>
		<div className="form-field-wrapper">
			<textarea {...input} placeholder={label} type={type}/>
			{touched && error && <span className="field-error">{error}</span>}
		</div>
	</div>
);

Form.renderRadioField = function ({input, label, type, items, meta: {touched, error}}) {
	return (
		<div className="form-field">
			<label>{label}</label>
			<div className="form-field-wrapper">
				{items.map(([value, name]) => (
					<label className="field-radio" key={value}>
						<Field {...input} component="input" type={'radio'} value={value}/>
						<span>{name}</span>
					</label>
				)) }

				{touched && error && <span className="field-error">{error}</span>}
			</div>
		</div>
	);
};


export default Form;